// Color variables
@import "../lib/style/bootstrap/less/variables.less";

// tabs above the info list
.nav-tabs > li > a {
  &:hover {
    cursor: pointer;
  }
}

// toggle buttons
#info-toggle-buttons {
  // do not display on smartphones
  @media (max-width: @screen-xs) {
    display: none;
  }
}

// list of records
.gn-info-list {
  padding: 5px 0px;
  margin: auto -10px;
  li {
    width: 100%;
    zoom: 1;
    list-style: none;
    float: left;
    padding: 10px;
    cursor: pointer;
    // info lists
    // 
    // ----- general
    .resultcard {
      padding: 0 0 10px 0;
      .title {
        min-height: 40%;
        padding: 10px;
        h4 {
          font-size: 18px;
          font-weight: 300;
          margin: 0;
        }
      }
      .abstract {
        overflow: auto;
        padding: 0 10px 0 10px;
        height: 60%;
      }
      .gn-md-thumbnail {
        display: none;
        float: left;
        width: 150px;
        height: 150px;
        border: 1px solid @input-border;
        background-color: #fff;
        .gn-img-thumbnail {
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          filter: grayscale(100%);
        }
      }
    }
    .noThumbnail {
      // display icon when there is no thumbnail
      .gn-img-thumbnail:after {
        content: "\f03e"; 
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        position: absolute;
        font-size: 46px;
        color: @gray-lighter;
        top: 50%;
        left: 50%;
        margin: -32px 0 0 -23px;
        z-index: 1;
      }
    }
    &:hover {
      .title {
        color: @gray-base;
      }
    }
  }
}

// 3 types of info lists
// 
// ----- small
.gn-info-list-small {
  .gn-info-list {
    li {
      width: 100%;
      padding: 5px 10px;
      margin-bottom: 10px;
      .resultcard {
        border-left: 3px solid @list-group-border;
        padding-left: 10px;
        .title {
          padding-left: 0;
          padding-bottom: 5px;
        }
        .abstract {
          max-height: 1.5em;
          overflow: hidden;
          padding-left: 0;
        }
        .introduction {
          display: none;
        }
        &:hover {
          background-color: @list-group-hover-bg;
        }
      }
    }
  }
}
// ----- large
.gn-info-list-large {
  .gn-info-list {
    li {
      width: 100%;
      .resultcard {
        .title {
          padding-left: 0;
        }
        .content {
          float: left;
          max-width: 70%
        }
        .abstract {
          max-height: auto;
          max-height: 250px;
          padding-left: 0;
        }
        .introduction {
          margin-top: 10px;
          .badge {
            font-weight: normal;
            background-color: @gray-dark;
          }
        }
        .gn-md-thumbnail {
          float: left;
          display: block;
          margin-top: 4px;
          margin-right: 10px;
        }
      }
      &:hover {
        .resultcard {
          background-color: @list-group-hover-bg;
        }
        .resultcard.hasThumbnail {
          .gn-img-thumbnail {
            filter: none;
          }
        }
      }
    }
  }
}
// ----- blocks
.gn-info-list-blocks {
  .gn-info-list {
    li {
      width: 33%;
      height: 250px;
      transition: all 200ms ease-in;
      transform: scale(1);
      .resultcard {
        .title {
          background: @gray-dark;
          border: @gray-dark;
          h4 {
            color: #fff;
            font-size: 15px;
            font-weight: 300;
            margin: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 22px;
          }
        }
        .abstract {
          border: 1px solid #ccc;
          height: 150px;
          padding-bottom: 5px;
        }
        .introduction {
          display: none;
        }
        .gn-md-thumbnail {
          display: block;
          width: 100%;
        }
      }
      .abstract {
        display: none;
      }
      &:hover {
        transition: all 200ms ease-in;
        transform: scale(1.03);
        .resultcard {
          .title {
            background: @gray-darker;
          }
        }
        .resultcard.hasThumbnail {
          .gn-img-thumbnail {
            filter: none;
          }
        }
        &:before {
          content: "";
        }
      }
    }
  }
}
// more blocks on 1 row when the screen is wider
.gn-info-list-blocks {
  .gn-info-list {
    @media (min-width: @screen-lg-min) {
      li {
        width: 25%;
      }
    }
    @media (max-width: @screen-sm-min) {
      li {
        width: 50%;
      }
    }
    // smartphones in landscape
    @media (max-width: @screen-xs) {
      li {
        width: 100%;
      }
    }
  }
}